<template>
	<div class="searchIndex">
		<div class="searchTitle">
		    <router-link :to="{name:'movieClips'}">
		        <img class="goback" src="../../../assets/images/movieClips/4/f-1.png" alt="" />
		    </router-link>
			<div class="title">搜索</div>
		</div>
		<div class="searchTab">
			<li @click="routerLeftClick">
			    <router-link :to="{name:'searchFilm'}" class="search" >找片</router-link>
			    <img v-show='Selected' src="../../../assets/images/movieClips/9/search_main_up_arrow_selected.png" class="searchFilmImg" alt="" />
			</li>
			<li @click="routerRightClick">
			    <router-link :to="{name:'searchPeople'}" class="search" >找人</router-link>
			    <img v-show="Normal" src="../../../assets/images/movieClips/9/search_main_up_arrow_selected.png" class="searchPeopleImg" alt="" />
			</li>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
export default{
	name:'searchIndex',
	data(){
		return{
			Selected:true,
			Normal:false
		}
	},
	created(){
//		if(this.Normal){
//			this.Normal=true;
//			this.Selected=false;
//		}else if(this.Selected){
//			this.Selected=true;
//			this.Normal=false;
//		}
	},
	methods:{
		routerLeftClick(event){
			this.Selected=true;
			if(this.Normal){
				this.Normal=false;
			}
		},
		routerRightClick(event){
			this.Normal=true;
			if(this.Selected){
				this.Selected=false;
			}
		}
	}
}
</script>

<style scoped lang="less">
@current:100rem;
.searchIndex{
	.searchTitle{
		text-align: center;
		width: 100%;
		height: 88/@current;
		font-size: 30/@current;
		color: white;
		background-color: #A54BE8;
		border-bottom: 1/@current solid #8026c5;
		line-height: 88/@current;
	    .goback{
	    	margin-top: 35/@current;
	    	margin-left: 40/@current;
	    	float: left;
	    	width: 25/@current;
	    	height: 25/@current;
	    }
	    .title{
	    	width: 50%;
	    	margin-left: 155/@current;
		    text-align: center;
	    }
    }
    .searchTab{
    	position: relative;
    	padding: 10/@current 0;
    	width: 100%;
    	height: 80/@current;
		background-color: #A54BE8;
		display: flex;
		font-size: 30/@current;
		li{
			flex: 1;
			text-align: center;
			list-style: none;
			.search{
				display: block;
				width: 100%;
				color: #8026c5;
				text-align: center;
				line-height: 70/@current;
			}
			.search:nth-child(1){
	           border-left: 1px solid #8026c5;			
			}
			.active{
				color: white;
			}
		}
		.searchFilmImg,.searchPeopleImg{
			position: absolute;
			width: 50/@current;
			height: 20/@current;
		}
		.searchFilmImg{
			bottom: 0;
			left: 135/@current;
		}
		.searchPeopleImg{
			bottom: 0;
			right: 135/@current;
		}
    }
}

</style>